<%@page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 引入favicon.ico网页图标 -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/x-icon"/>
    <title>睿道商城后台管理</title>

    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/admin-base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/admin.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/modal.js"></script>
    <style type="text/css">
        .cque-list {
            margin: 10px;
            display: flex;
            flex-direction: column;
        }

        .cque-list-nav {
            margin: 10px;
        }

        .cque-list-content {
            margin: 10px;
        }

        .cque-td {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        textarea {
            resize: none;
        }
    </style>
</head>

<body>
<div class="cque-window">
    <div class="cque-nav">
        <div class="navbar-header" style="margin-left: 20px">
            <img alt="Brand" height="60px" src="${pageContext.request.contextPath}/assets/images/logo.png">
        </div>
        <h2 style="margin-left: 20px">商城后台管理系统</h2>
    </div>
    <div class="cque-content">
        <div class="cque-side">
            <div class="panel panel-info" style="margin: 0;height: 100%">
                <div class="panel-heading">系统菜单</div>
                <div class="panel-body" style="padding: 0">
                    <div class="list-group">
                        <a href="${pageContext.request.contextPath}/admin/category/list"
                           class="list-group-item">商品类别管理</a>
                        <a href="${pageContext.request.contextPath}/admin/product/list" class="list-group-item">商品管理</a>
                        <a href="${pageContext.request.contextPath}/admin/order/list" class="list-group-item">订单管理</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="cque-main">
            <div class="cque-list">
                <div class="cque-list-nav">
                    <button class="btn btn-default addProduct">添加</button>
                </div>
                <div class="cque-list-content">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th style="text-align: center">序号</th>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">名称</th>
                            <th style="text-align: center">市场价格</th>
                            <th style="text-align: center">商城价格</th>
                            <th style="text-align: center">上架时间</th>
                            <th style="text-align: center">是否热销</th>
                            <th style="text-align: center">是否上架</th>
                            <th style="text-align: center">所属分类</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody id="productList">
                        <c:forEach items="${productList}" var="product" varStatus="status">
                            <tr>
                                <td style="text-align: center">${status.count}</td>
                                <td style="text-align: center">${product.id}</td>
                                <td style="text-align: center">${product.name}</td>
                                <td style="text-align: center">${product.marketPrice}</td>
                                <td style="text-align: center">${product.shopPrice}</td>
                                <td style="text-align: center"><fmt:formatDate value="${product.createDate}"
                                                                               pattern="yyyy-MM-dd"/></td>
                                <td style="text-align: center">${product.isHot==1?"是":"否"}</td>
                                <td style="text-align: center">${product.flag==0?"是":"否"}</td>
                                <td style="text-align: center">
                                    <c:forEach items="${categoryList}" var="category">
                                        <c:if test="${product.cid==category.cid}">
                                            ${category.cname}
                                        </c:if>
                                    </c:forEach>
                                </td>
                                <td class="cque-td">
                                    <button class="btn btn-default updateProduct" type="button"
                                            onclick="updateUI('${product.id}')">修改
                                    </button>
                                    <button class="btn btn-default" type="button" onclick="doDelete('${product.id}')">
                                        删除
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--添加模态框--%>
<div class="modal fade" id="addModal" style="display:none;">
    <div class="modal-dialog modal-sm" style="width:460px;">
        <div class="modal-content">
            <div style="height: 700px">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;">添加商品</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt" id="box-login">
                        <div id="add_form">
                            <ul>
                                <li class="form-group">
                                    <label for="ida">商品编号：</label>
                                    <input class="form-control" id="ida" maxlength="50" name="cid"
                                           placeholder="请输入商品编号" type="text">
                                </li>
                                <li class="form-group">
                                    <label for="namea">商品名称：</label>
                                    <input class="form-control" id="namea" placeholder="请输入商品名称"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="marketPricea">市场价格：</label>
                                    <input class="form-control" id="marketPricea" placeholder="请输入价格"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="shopPricea">商城价格：</label>
                                    <input class="form-control" id="shopPricea" placeholder="请输入价格"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="imagea">展示图片：</label>
                                    <input class="form-control" id="imagea" placeholder="请选择图片"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="desca">描述：</label>
                                    <textarea id="desca" style="width: 250px;height: 120px">
                                    </textarea>
                                </li>
                                <li class="form-group">
                                    <label for="cida">所属类别：</label>
                                    <select id="cida">
                                        <option value="1" selected="selected">手机数码</option>
                                        <option value="2">电脑办公</option>
                                        <option value="3">家具家居</option>
                                        <option value="4">鞋靴箱包</option>
                                        <option value="5">图书音像</option>
                                        <option value="6">母婴孕婴</option>
                                    </select>
                                </li>
                            </ul>
                            <div class="login-box marginB10" style="margin-top: 25px;">
                                <button id="add_btn" type="button" class="btn btn-micv5 btn-block" onclick="doAdd()">
                                    添加
                                </button>
                            </div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="updateModal" style="display:none;">
    <div class="modal-dialog modal-sm" style="width:460px;">
        <div class="modal-content">
            <div style="height: 730px">
                <div class="modal-header">
                    <button type="button" id="update_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" style="font-size: 18px;">修改商品类别信息</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt">
                        <div id="update_form">
                            <ul>
                                <li class="form-group">
                                    <label for="idu">商品编号：</label>
                                    <input class="form-control" id="idu" maxlength="50" readonly="readonly"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="nameu">商品名称：</label>
                                    <input class="form-control" id="nameu" placeholder="请输入商品名称"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="marketPriceu">市场价格：</label>
                                    <input class="form-control" id="marketPriceu" placeholder="请输入价格"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="shopPriceu">商城价格：</label>
                                    <input class="form-control" id="shopPriceu" placeholder="请输入价格"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="imageu">展示图片：</label>
                                    <input class="form-control" id="imageu" placeholder="请选择图片"
                                           type="text">
                                </li>
                                <li class="form-group">
                                    <label for="descu">描述：</label>
                                    <textarea id="descu" style="width: 250px;height: 120px">
                                    </textarea>
                                </li>
                                <li class="form-group">
                                    <label>是否上架：</label>
                                    <input type="radio" name="flagu" value="0"> 是
                                    <input type="radio" name="flagu" value="1"> 否
                                </li>
                                <li class="form-group">
                                    <label for="cidu">所属类别：</label>
                                    <select id="cidu">
                                        <option value="1">手机数码</option>
                                        <option value="2">电脑办公</option>
                                        <option value="3">家具家居</option>
                                        <option value="4">鞋靴箱包</option>
                                        <option value="5">图书音像</option>
                                        <option value="6">母婴孕婴</option>
                                    </select>
                                </li>
                            </ul>
                            <div class="login-box marginB10" style="margin-top: 25px;">
                                <button id="update_btn" type="button" class="btn btn-micv5 btn-block"
                                        onclick="doUpdate()">
                                    修改
                                </button>
                            </div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //添加界面
    function addProduct() {
        $("#addModal").modal("show")
    }

    $(".addProduct").on("click", addProduct), function () {
        var e = [];
        $("#addModal").on("show.bs.modal",
            function () {
                for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
                e.push($(this));
                var o = $(this),
                    a = o.find(".modal-dialog"),
                    t = $('<div style="display:table; width:100%; height:100%;"></div>');
                t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                    t.children("div").html(a),
                    o.html(t)
            })
    }();

    //添加操作
    function doAdd() {
        var id = $("#ida").val();
        var name = $("#namea").val();
        var marketPrice = $("#marketPricea").val();
        var shopPrice = $("#shopPricea").val();
        var image = $("#imagea").val();
        var desc = $("#desca").val();
        var cid = $("#cida").val();
        if (id == "" || id == null) {
            alert("编号不能为空");
            return;
        }
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                id: id,
                name: name,
                marketPrice: marketPrice,
                shopPrice: shopPrice,
                image: image,
                desc: desc,
                cid: cid
            },
            url: "${pageContext.request.contextPath}/admin/product/add",
            success: function (data) {
                /*alert(data.info);
                location.reload();*/
                if (data=="添加失败"){
                    alert(data);
                    return;
                }
                alert("添加成功");
                productListUI(data);
                $("#addModal").modal("hide");
                $("input,textarea").val('');
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }

    //删除操作
    function doDelete(id) {
        var flag = confirm("确定删除?");
        if (flag) {
            $.ajax({
                type: "post",
                dataType: "json",
                data: {id: id},
                url: "${pageContext.request.contextPath}/admin/product/delete",
                success: function (data) {
                    /*alert(data.info);
                    location.reload();*/
                    if (data=="删除失败"){
                        alert(data);
                        return;
                    }
                    alert("删除成功");
                    productListUI(data);
                },
                error: function () {
                    alert("网络超时，请重试");
                }
            });
        }
    }

    //修改界面
    function updateUI(id) {
        var e = [];
        $("#updateModal").on("show.bs.modal",
            function () {
                for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
                e.push($(this));
                var o = $(this),
                    a = o.find(".modal-dialog"),
                    t = $('<div style="display:table; width:100%; height:100%;"></div>');
                t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                    t.children("div").html(a),
                    o.html(t)
            }).modal("show");
        $.ajax({
            type: "post",
            dataType: "json",
            data: {id: id},
            url: "${pageContext.request.contextPath}/admin/product/findOne",
            success: function (data) {
                console.log(data);
                $("#idu").val(data.id);
                $("#nameu").val(data.name);
                $("#marketPriceu").val(data.marketPrice);
                $("#shopPriceu").val(data.shopPrice);
                $("#imageu").val(data.image);
                $("#descu").val(data.desc);
                $("#cidu").val(data.cid);
                if (data.flag == 0) {
                    $("input:radio[value='0']").attr("checked", "true");
                } else {
                    $("input:radio[value='1']").attr("checked", "true");
                }
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }

    //修改操作
    function doUpdate() {
        var id = $("#idu").val();
        var name = $("#nameu").val();
        var marketPrice = $("#marketPriceu").val();
        var shopPrice = $("#shopPriceu").val();
        var image = $("#imageu").val();
        var desc = $("#descu").val();
        var cid = $("#cidu").val();
        var flag = $("input[name='flagu']:checked").val();
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                id: id,
                name: name,
                marketPrice: marketPrice,
                shopPrice: shopPrice,
                image: image,
                desc: desc,
                flag: flag,
                cid: cid
            },
            url: "${pageContext.request.contextPath}/admin/product/update",
            success: function (data) {
                /*console.log(data);
                alert(data.info);
                location.reload();*/
                if (data=="修改失败"){
                    alert(data);
                    return;
                }
                alert("修改成功");
                productListUI(data);
                $("#updateModal").modal("hide");
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }

    //CST时间格式化
    function dateFormat (date, format) {
        date = new Date(date);
        date.setHours(date.getHours()-14);
        var o = {
            'M+' : date.getMonth() + 1, //month
            'd+' : date.getDate()+1, //day
            'H+' : date.getHours(), //hour
            'm+' : date.getMinutes(), //minute
            's+' : date.getSeconds(), //second
            'q+' : Math.floor((date.getMonth() + 3) / 3), //quarter
            'S' : date.getMilliseconds() //millisecond
        };

        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

        for (var k in o)
            if (new RegExp('(' + k + ')').test(format)){
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
            }
        return format;
    }

    function productListUI(data) {
        var str="";
        var count=1;
        for (var i=0;i<data.productList.length;i++){
            var createTime=dateFormat(data.productList[i].createDate,'yyyy-MM-dd');
            var cname="";
            for (var j=0;j<data.categoryList.length;j++){
                if (data.productList[i].cid==data.categoryList[j].cid){
                    cname=data.categoryList[j].cname;
                }
            }
            str+=`<tr>
                            <td style="text-align: center">\${count}</td>
                            <td style="text-align: center">\${data.productList[i].id}</td>
                            <td style="text-align: center">\${data.productList[i].name}</td>
                            <td style="text-align: center">\${data.productList[i].marketPrice}</td>
                            <td style="text-align: center">\${data.productList[i].shopPrice}</td>
                            <td style="text-align: center">\${createTime}</td>
                            <td style="text-align: center">\${data.productList[i].isHot==1?"是":"否"}</td>
                            <td style="text-align: center">\${data.productList[i].flag==0?"是":"否"}</td>
                            <td style="text-align: center">
                                \${cname}
                            </td>
                            <td class="cque-td">
                                <button class="btn btn-default updateProduct" type="button"
                                        onclick="updateUI('\${data.productList[i].id}')">修改
                                </button>
                                <button class="btn btn-default" type="button" onclick="doDelete('\${data.productList[i].id}')">
                                    删除
                                </button>
                            </td>
                        </tr>`;
            count++;
        }
        $("#productList").html(str);
    }
</script>
</body>
</html>